<template>
	<view class="container">
		<view  class="cell">
			<view class="cell-top">
				{{detail.activityTitle}}
			</view>
			<view class="cell-line">
				
			</view>
			<view class="cell-title">
				报名时间
			</view>
			<view class="cell-btns">
				<view class="cell-btn">{{dateStr}}</view>
			</view>
		<!-- 	<view class="cell-title">
				参数日期
			</view>
			<view class="cell-btns" style="margin-bottom: 0;">
				<view class="cell-btn">绘画</view>
				<view class="cell-btn">书法</view>
			</view> -->
		</view>
		<view  class="cell">
			<view  class="cell-one">
				<view  class="cell-one-txt">数量:</view>
				<view  class="cell-one-op">
					<u-number-box  @change="changeV" v-model="num"></u-number-box>
				</view>
			</view>
			<view  class="cell-one">
				<view  class="cell-one-txt">选手名称:</view>
				<view  class="cell-one-op">
				  <u--input
					placeholder="请输入名称"
					border="surround"
					v-model="name"
				  ></u--input>
				</view>
			</view>
			<view  class="cell-one">
				<view  class="cell-one-txt">电话号码:</view>
				<view  class="cell-one-op">
					<u--input
						placeholder="请输入手机号码"
						border="surround"
						v-model="phone"
					></u--input>
				</view>
			</view>
			<view  class="cell-one">
				<view  class="cell-one-txt">获取头像:</view>
				<view  class="cell-one-op">
					<view style="position: relative;">
					<img style="width: 50rpx;height: 50rpx;" v-if="avatarUrl" :src="avatarUrl" alt="">
					
					<u--input v-else
						placeholder="请点击获取头像"
						border="surround"
						v-model="avatarUrl"
					></u--input>
					<button v-if="!avatarUrl" style="position: absolute;z-index: 1000;left: 0; top: 0;opacity: 0.0;width: 100%;"  open-type="chooseAvatar" @chooseavatar="chooseImg">
						 点击选择头像
					</button>
					</view>
				
				</view>
			</view>
			<view  class="cell-one">
				<view  class="cell-one-txt">获取昵称:</view>
				<view  class="cell-one-op">
					<u--input
						placeholder="点击获取昵称"
						border="surround"
						 type="nickname" 
						 @blur="setNickName"
						 v-model="nickname"
					></u--input>
				</view>
			</view>
		</view>
		
		
		<view class="kong">
			
		</view>
		
		<view class="btns">
			<view class="btn-l">
				实付金额: 
				<view class="money">
					￥{{totalFee}}
				</view>
			</view>
			<view @click="onSave()" class="btn-r">
				提交订单
			</view>
		</view>
	</view>
</template>

<script>
	import { activityDetail, orderpost, createOrder } from './indexServ.js'
	import dayjs from 'dayjs'
	export default {
		name: 'template',
		data() {
			return{
				dateStr: (new Date()).getMonth() + 1 + '年' + (new Date()).getDate() + '日',
				keyword: '',
				show:false,
				num: 1,
				name: '',
				phone: '',
				activityId: '',
				detail: {},
				nickname: '',
				avatarUrl: '',
				totalFee: 0
			}
		},
		onLoad(op) {
			this.activityId = op.activityId;
			this.GET_activityDetail(op.activityId)
		},
		methods: {
			onSave(){
				this.POST_orderpost()
			},
			setNickName(e){
				this.nickname= e
				uni.setStorageSync('nickName',this.nickname)
				console.log('nickname',e)
			},
			changeV(e){
				console.log(e)				
				let value= e.value
				this.totalFee = value * this.detail.activityFee
				
			},
			chooseImg(e){
				console.log(e)
				// e.detail.avatarUrl
				let that = this
				uni.uploadFile({
					url: getApp().globalData.envParam.baseURL + '/api/order/upload',
					filePath: e.detail.avatarUrl,
					  name: 'file',
					  formData: {
					  },
					  success (res){
						console.log('---上传头像--')
						console.log(res)
						let d = JSON.parse(res.data)
						that.avatarUrl = d.url
						uni.setStorageSync('avatarUrl',d.url)
					  },
					  fail(err) {
						  console.log(err)
					  }
					
				})
			},
			onClickNick(e) {
				console.log('---onClickNick')
				console.log(e)
				
			},
			async GET_activityDetail(id) {
				let res = await activityDetail({activityId: id})
				if(res.code == 200) {
					this.detail = res.data
					this.totalFee= this.detail.activityFee
				}
			},
			
			wxMessage(){
				uni.requestSubscribeMessage({
					tmplIds:['dZnBLtXJs6dtf22tA9onhLaPOY6rUsx2L5BFwmjdJcQ'],
					success: function(callback){
						console.log('requestSubscribeMessage success',callback)
					},
					complete: function(){
						uni.showToast({
							title: `支付成功`,
							icon: 'none'
						})
						uni.navigateTo({
							url:'/pages/my/paysuccess/paysuccess'
						})
					}
				})
				
				
			},
			
			async POST_createOrder(orderId) {
				
				let p = {
					outTradeNo: orderId,
					totalFee: this.detail.activityFee * this.num * 100,
					body: this.detail.activityTitle,
					openid: uni.getStorageSync('openid'),
					appid: 'wxa83fda3b97adf7ae',
					spbillCreateIp:'112.74.87.135',
					// notifyUrl:getApp().globalData.envParam.baseURL+'/api/wx/notify/order',
					tradeType:"JSAPI",
					mchId:1655059647,
				}
				let res = await createOrder(p)
				uni.hideLoading()
				if(res) {
					uni.requestPayment({
						timeStamp: res.timeStamp,
						nonceStr: res.nonceStr,
						package: res.packageValue,
						signType: 'MD5',
						paySign: res.paySign,
						success: event => {
							this.wxMessage()							
						},
						  fail: error => {
							  // uni.showToast({
							  // 	title: `支付失败`,
							  // 	icon: 'none'
							  // })
							console.log("支付失败")
							console.log(error)
							uni.switchTab({
								url:'/pages/order/index'
							})
						  },
					})
				}
			},
			
			
			async POST_orderpost() {
				if(!this.phone) {
					uni.showToast({
						title: '请填写手机号码',
						icon: 'error'
					})
					return
				}
				if(!this.name) {
					uni.showToast({
						title: '请填写选手名称',
						icon: 'error'
					})
					return
				}				
				
				if(!this.avatarUrl) {
					uni.showToast({
						title: '请设置头像',
						icon: 'error'
					})
					return
				}
				if(!this.nickname) {
					uni.showToast({
						title: '请获取昵称',
						icon: 'error'
					})
					return
				}
				uni.showLoading({
					title: '下单中...'
				});
				let orderId = dayjs().year() + '' + (dayjs().month() +1) + '' + dayjs().day()  + '' + dayjs().hour()  + '' + dayjs().minute() + '' + dayjs().second() + '' + dayjs().millisecond()
				let p = {
					activityId: this.activityId,
					amount: this.detail.activityFee * this.num,
					channelId: uni.getStorageSync('channelId'),
					openId: uni.getStorageSync('openid'),
					orderId: orderId,
					num: this.num,
					phone: this.phone,
					playName: this.name,
					nickName: this.nickname,
					avatarUrl: this.avatarUrl
				}
				let res = await orderpost(p)
				if(res.code == 200) {
					this.POST_createOrder(orderId)
				}
			},
			
		}
	
	}
</script>
<style  lang="scss" scoped>
	.container{
		padding: 20rpx;
		box-sizing: border-box;
	}

	.cell{
		width: 100%;
		background: #fff;
		display: flex;
		flex-direction: column;
		margin-bottom: 40rpx;
		padding: 30rpx;
		box-sizing: border-box;
		border-radius: 30rpx;
		.cell-top{
			width: 100%;
			background: #fff;
			// padding: 30rpx;
			box-sizing: border-box;
			font-size: 38rpx;
			font-weight: bold;
		}
		.cell-line{
			width: 100%;
			height: 2rpx;
			background: #f4f4f4;
			margin: 30rpx 0;
		}
		.cell-title{
			width: 100%;
			color: #333;
			font-size: 38rpx;
			font-weight: bold;
			margin-bottom: 30rpx;
		}
		.cell-btns{
			width: 100%;
			align-items: center;
			margin-bottom: 40rpx;
			display: flex;
			.cell-btn{
				width: 320rpx;
				height: 60rpx;
				border-radius: 40rpx;
				background: #f4f4f4;
				margin-right: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30rpx;
				color:#454545;
			}
		}
		.cell-one{
			width: 100%;
			height: 80rpx;
			display: flex;
			margin-bottom: 30rpx;
			align-items: center;
			.cell-one-txt{
				width: 180rpx;
			}
			.cell-one-op{
				flex: 1;
			}
		}
	}
	
			
	.kong{
		width: 100%;
		height: 120rpx;
	}
	.btns{
		width: 100%;
		height: 100rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		background: #f7f7fa;
		display: flex;
		.btn-l{
			height: 100rpx;
			flex: 1;
			border-right: 2rpx solid #e1e1e1;
			border-top: 2rpx solid #e1e1e1;
			display: flex;
			align-items: center;
			padding-left: 30rpx;
			box-sizing: border-box;
			color: #888888;
			font-size: 30rpx;
			.money{
				color: #e94f4f;
			}
		}
		.btn-r{
			width: 260rpx;
			height: 100rpx;
			background: #3c9cff;
			border-top: 2rpx solid #3c9cff;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 32rpx;
		}
		 
	}
	
	

</style>